import React, { useEffect,useState } from 'react'
import { View,Text,Image } from '@tarojs/components'
import './index.less'
import Taro from '@tarojs/taro'

export default function wholeOrderDetail() {
  const [order, setorder] = useState({
    relationObject:{
      imgUrl:''
    },
    customTitle:'',
    applyDateEnd: "",
    createOrderDate: "",
    orderId: "",
    payAmount: 0,
    payOrderDate: "",
    sureConfirmNum: 0,
    usedNum: 0,
    waitConfirmNum: 0
  })

  useEffect(()=>{
    Taro.showLoading({title:'加载中...'})
    Taro.$get(`/marketing/app/package/packageOrderDetail`,{orderId:Taro.getCurrentInstance().router.params.orderId},'1').then(res=>{
      if (res.code === '1') setorder(res.content)
    })
  },[])

  function toManReq(status){
    Taro.navigateTo({
      url:`/mineSubPack/wholeCinema/wholeOrderStatusList/index?orderId=${Taro.getCurrentInstance().router.params.orderId}&status=${status || 0}`,
    })
  }

  return (
    <View>
      <View id="page_container">
        <View className="detail_body">
          <View className="body_block b_head">
            <View className="thumb_con">
              <Image className="thumb" src={order.relationObject.imgUrl}></Image>
            </View>
            <View className="head_title"><Text>《{order.relationObject.title}》{order.customTitle}套餐</Text></View>
          </View>
          <View className="body_block b_body">
              <View >
                <View style="width: 70%;display: inline-block; font-size: 32rpx;font-weight: 700; color: #26282A;">观影券领取管理</View>
                <View onClick={()=>{toManReq(0)}} style="color: #26282A; font-size: 28rpx; width: 30%;display: inline-block;text-align: right; font-weight: 400;">
                  全部<Text className='at-icon at-icon-chevron-right' style='color:#7f7f7f;font-size: 15px'></Text></View>
              </View>
              <View style="margin-top: 10rpx;"><Text style="color:#66686A; font-size: 28rpx; font-weight: 400; " space="nbsp">领取有效期：{order.applyDateEnd}前</Text></View>
              <View style="padding: 30rpx 30rpx;font-size: 24rpx;text-align: center;color:#7f7f7f">
                <View style="display: inline-block; width: 20%;" onClick={()=>{toManReq(0)}}>
                  <View style="font-size: 64rpx;color:#26282A; font-weight: 700;">{order.waitConfirmNum}</View>
                  <View style="font-size: 28rpx;color:#66686A; font-weight: 400;">待确认</View>
                </View>
                <View style="display: inline-block; width: 20%;"></View>
                <View style="display: inline-block; width: 20%;" onClick={()=>{toManReq(1)}}>
                  <View style="font-size: 64rpx;color:#26282A; font-weight: 700">{order.sureConfirmNum}</View>
                  <View style="font-size: 28rpx;color:#66686A; font-weight: 400;">已确认</View>
                </View>
                <View style="display: inline-block; width: 20%;"></View>
                <View style="display: inline-block; width: 20%;" onClick={()=>{toManReq(2)}}>
                  <View style="font-size: 64rpx;color:#26282A; font-weight: 700">{order.usedNum}</View>
                  <View style="font-size: 28rpx;color:#66686A; font-weight: 400;">已购票</View>
                </View>
              </View>
              <View><Text space="nbsp" style="font-size: 24rpx; color:#FF0D49 ; font-weight: 400;">温馨提示：领取后券码不可退，记得提醒朋友购票哦</Text></View>
          </View>
          <View className="body_block b_share">
            <View onClick={()=>{
              Taro.navigateTo({
                url:`/mineSubPack/wholeCinema/wholeCinemaPlacard/index?orderId=${Taro.getCurrentInstance().router.params.orderId}`,
              })
            }} className='box-flex'>
              <View style="width: 70%;display: inline-block; font-size: 32rpx;font-weight: 700; color: #26282A; margin-right: auto">分享给好友</View>
              <Text className='at-icon at-icon-chevron-right' style='color:#7f7f7f;font-size: 15px'></Text>
            </View>
          </View>
          <View className="body_block b_info">
            <View >
              <View style="width: 70%;display: inline-block; font-size: 32rpx;font-weight: 700; color: #26282A;">订单详情</View>
              <View className="detial_list">
                <View>
                  <View className="title">实付金额</View>
                  <View className="desc">￥{order.payAmount}</View>
                </View>
                <View>
                  <View className="title">退款金额</View>
                  <View className="desc">￥{order.refundAmount || 0}</View>
                </View>
                <View>
                  <View className="title">订单编号</View>
                  <View className="desc">{Taro.getCurrentInstance().router.params.orderId} <View onClick={()=>{
                    Taro.setClipboardData({
                      data:Taro.getCurrentInstance().router.params.orderId,
                      success:res=>{
                        Taro.$toast('复制成功','success')
                      }
                    })
                  }} style={`backgroundImage:'url(https://taihu-finesdk.oss-cn-beijing.aliyuncs.com/fine-event/20240506/placard/copy.png)'`} className="copy"><Text>复制</Text></View></View>
                </View>
                <View>
                  <View className="title">创建时间</View>
                  <View className="desc">{order.createOrderDate}</View>
                </View>
                <View>
                  <View className="title">付款时间</View>
                  <View className="desc">{order.payOrderDate}</View>
                </View>
              </View>
            </View>
          </View>
        </View>
      </View>
    </View>
  )
}
